<template>
  <view>
    <!-- //头部 -->
    <view class="top-goods" @click="">
      <template
        v-if="goodsInfos && goodsInfos.length"
        v-for="(item, index) in goodsInfos.length > 5
          ? goodsInfos.slice(0, 5)
          : goodsInfos"
        :key="index"
      >
        <!-- <view :class="classMap[index+1]" @click="clickGoods(item)"> -->
        <view :class="classMap[index + 1]">
          <view class="">
            <image
              mode="widthFix"
              style="border: 4rpx solid #82302a"
              :src="item.img"
            ></image>
          </view>
          <view class="UR">
            <image :src="item.rule_img"></image>
          </view>
        </view>
      </template>
    </view>
    <!-- 中间区域 -->
    <view class="goods-mid">
      <view class="mid-img">
        <image
          src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/card/mid-bg.png"
        ></image>
        <view class="right-rule">
          <image
            src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/card/rule.png"
            @click="openRule"
          ></image>
          <image
            src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/card/odds.png"
            @click="openOdds"
          ></image>
          <image
            src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/card/logs.png"
            @click="openLogs"
          ></image>
          <!-- <image src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/card/points.png" @click="openPoints"></image> -->
          <view class="points">
            <image
              src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/opencard/points.png"
            ></image>
          </view>
          <view class="comeout">
            <image
              src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/opencard/comeout.png"
            ></image>
          </view>
        </view>
        <!-- //产品 -->
        <view class="mid-goods">
          <!-- <view class="goods-img" >
						<image  mode="widthFix" style="border: 6rpx solid #82302A;" :src="currentGoods != undefined && currentGoods.img != undefined ? currentGoods.img :''"></image>
					</view> -->
          <view class="goods-img">
            <image
              mode="widthFix"
              style="border: 6rpx solid #82302a"
              :src="
                blindboxDetail.box != undefined &&
                blindboxDetail.box.details_img != undefined
                  ? blindboxDetail.box.details_img
                  : ''
              "
            ></image>
          </view>
          <!-- <view class="img-leavel" >
						<image :src="currentGoods != undefined &&currentGoods.rule_img != undefined ? currentGoods.rule_img:''"></image>
					</view> -->
        </view>
      </view>
      <view class="progress-bar">
        <view class="top-tit">
          <view class="comeout-left">
            <image
              src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/card/comeout-img.png"
            ></image>
          </view>

          <view
            v-if="
              blindboxDetail != undefined && blindboxDetail.box.is_must == 1
            "
            class="comeout-right"
          >
            <text>连拆</text>
            <text style="color: #956fed"
              >{{ blindboxDetail.box.must_leave }}包</text
            >
            <text>必出</text>
            <text style="color: #956fed">{{ mustRuleNames }}</text>
          </view>
        </view>
        <view class="bottom-num">
          <view class="left-gif">
            <ProgressBar
              :progress="power_progress"
              style="width: 100%; height: 30rpx"
            />
            <!-- <ProgressBar :progress="90" style="width: 100%; height:30rpx;" /> -->
          </view>
          <view class="all-num">
            <text style="color: #956fed">{{
              blindboxDetail.box.user_power
            }}</text>
            <text>/{{ blindboxDetail.box.must_leave }}</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 支付按钮 -->
    <view class="select-num-btn">
      <view class="select-one" @click="payone">
        <image
          src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/one.png"
          class=""
          @click="payPOP(1)"
        ></image>
      </view>
      <view
        class="select-one"
        @click="payThree"
        v-if="blindboxDetail.box.pattern == 2"
      >
        <image
          src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/three.png"
          class=""
          @click="payPOP(3)"
        ></image>
      </view>
      <view
        class="select-one"
        @click="payFive"
        v-if="blindboxDetail.box.pattern == 2"
      >
        <image
          src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/ten.png"
          class=""
          @click="payPOP(10)"
        ></image>
      </view>
    </view>

    <!-- 支付弹窗 -->
    <uni-popup ref="paypopup" type="bottom">
      <view class="order-pop">
        <view class="popup-close" @click="closeOrder">
          <image
            src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/popup-close.png"
          ></image>
        </view>
        <view class="popup-title">
          <text>确认订单</text>
        </view>
        <view class="order-top">
          <view class="left-img">
            <image :src="boxInfo.img"></image>
          </view>
          <view class="right-tit">
            <view class="title">
              <text>{{ boxInfo.name }}</text>
            </view>
            <view class="tit-mid">
              <text>不支持七天无理由退货·无法回收</text>
            </view>
            <view class="tit-num">
              <text>购买数量</text>
              <text style="color: #7948ea; margin-left: 50rpx"
                >{{ buyCount }}次</text
              >
            </view>
          </view>
        </view>
        <view class="select-coupon" @click="chooseCoupon">
          <view class="coupon-left">
            <text class="">选择优惠券</text>
          </view>
          <view class="coupon-right">
            <text style="margin-right: 15rpx"></text>
            <text>{{ couponname }}></text>
          </view>
        </view>
        <!-- 虚线 -->
        <view class="popup-line"></view>
        <view class="payment-tit">
          <text>支付方式</text>
        </view>
        <view class="payment-list">
          <!-- 微信 -->
          <!-- <view class="wechat">
						<view class="wechat-left">
							<view class="wechat-img">
								<image src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/pop-wechat.png"></image>
							</view>
							<view class="wechat-tit">
								<text >微信支付</text>
							</view>
						</view>
						<view class="wechat-right">
							<view class="wechat-money">
								<text >￥90.00</text>
							</view>
							<view class="select-icon">
								<image src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/select-icon.png"></image>
							</view>
						</view>
					</view> -->
          <!-- 虚线 -->
          <!-- <view class="popup-line"></view> -->
          <!-- 卡尘 -->
          <view class="wechat">
            <view class="wechat-left">
              <view class="wechat-img">
                <image
                  style="width: 64rpx; height: 78rpx"
                  src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/pop-kachen.png"
                ></image>
              </view>
              <view class="wechat-tit">
                <text>卡尘支付</text>
              </view>
            </view>
            <view class="wechat-right">
              <view class="wechat-money">
                <text></text>
              </view>
              <view class="select-icon">
                <image
                  src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/select-icon.png"
                ></image>
              </view>
            </view>
          </view>
          <!-- 虚线 -->
          <!-- <view class="popup-line"></view> -->
          <!-- //支付宝 -->
          <!-- <view class="wechat">
						<view class="wechat-left">
							<view class="wechat-img">
								<image  style="width: 56rpx ;height: 56rpx;"src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/pop-alipay.png"></image>
							</view>
							<view class="wechat-tit">
								<text >支付宝支付</text>
							</view>
						</view>
						<view class="wechat-right">
							<view class="wechat-money">
								<text ></text>
							</view>
							<view class="select-icon">
								<image src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/select-icon.png"></image>
							</view>
						</view>
					</view> -->

          <view class="underage">
            <text>未成年人禁止购买</text>
          </view>
          <view class="pay-button" @click="paytxDrawMoney">
            <image
              src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/pay-button.png"
            ></image>
          </view>

          <view class="pay-agree">
            <!-- <radio style="transform: scale(0.8)" value="r1" :checked="agree"/>本人已满18岁，已阅读并同意<text style="color: #7948EA;">《天选之人使用协议》</text> -->
          </view>
        </view>
      </view>
    </uni-popup>

    <!-- 购买记录弹窗 -->
    <uni-popup ref="logs" type="center">
      <view class="logs">
        <view class="popup-close" @click="closeLogs">
          <image
            src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/popup-close.png"
          ></image>
        </view>
        <!-- //标题 -->
        <view class="logs-title">
          <text>中赏记录</text>
        </view>
        <!-- //赏级 -->

        <view class="card-leavel">
          <template v-for="(item, index) in ruleInfos" :key="index">
            <view
              class="leavel-all"
              :style="
                item.rule_id === currentRewardRuleId
                  ? 'background-color: #F1EBFF; color: #7948EA;'
                  : ''
              "
              @click="chooseRewardRule(item)"
            >
              <text>{{ item.rule_name }}</text>
            </view>
          </template>
        </view>
        <!-- //记录 -->
        <view class="logs-list">
          <scroll-view
            scroll-y="true"
            style="height: 760rpx"
            @scrolltolower="prizeLower"
          >
            <template v-for="(item, index) in openRewardList" :key="index">
              <view class="all-logs">
                <view class="logs-left">
                  <view class="logs-img">
                    <image :src="item.goods_img"></image>
                  </view>
                  <text class="name">{{ item.goods_name }}</text>
                </view>
                <view class="logs-right">
                  <text class="logs-num">{{ item.rule_name }}</text>
                  <view class="user-img">
                    <image class="user-imgs" :src="item.himg"></image>
                    <text>{{ item.nickname }}</text>
                  </view>
                </view>
              </view>
            </template>
          </scroll-view>
        </view>
      </view>
    </uni-popup>

    <!-- 中赏概率弹窗 -->
    <uni-popup ref="odds" type="center">
      <view class="odds">
        <view class="popup-close" @click="closeOdds">
          <image
            src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/popup-close.png"
          ></image>
        </view>
        <!-- //标题 -->
        <view class="logs-title">
          <text>中赏概率</text>
        </view>
        <!-- //赏级 -->
        <view class="odds-list">
          <template v-for="(item, index) in ruleInfos" :key="index">
            <view
              class="odds-name"
              :style="
                item.rule_id === currentRuleId
                  ? 'background-color: #F1EBFF; color: #7948EA;'
                  : ''
              "
              @click="chooseRule(item)"
            >
              <text>{{ item.rule_name }}</text>
              <text>{{ Number(item.sum_probability).toFixed(3) }}%</text>
            </view>
          </template>
        </view>
        <!-- //分隔线 -->
        <view class="odds-line"></view>
        <!-- 产品列表 -->
        <scroll-view class="" scroll-y="true" style="height: 680rpx">
          <view class="odds-goods-list">
            <template
              v-for="(item, index) in currentGoodsInfos.concat(
                currentGoodsInfos
              )"
              :key="index"
            >
              <view class="odds-goods" @click="gotodrive2(item)">
                <image :src="item.img"></image>
                <view class="goods-name">
                  <text>{{ item.goods_name }}</text>
                </view>
              </view>
            </template>
          </view>
        </scroll-view>
      </view>
    </uni-popup>
    <!-- //规则弹窗 -->
    <uni-popup ref="rule" type="bottom">
      <view class="rule">
        <view class="popup-close" @click="closeRule">
          <image
            src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/popup-close.png"
          ></image>
        </view>
        <!-- //标题 -->
        <view class="logs-title">
          <text>规则</text>
        </view>
        <view class="rule-text">
          <text>这里是规则说明后台添加富文本</text>
        </view>
      </view>
    </uni-popup>
    <!-- //积分弹窗 -->
    <uni-popup ref="points" type="bottom">
      <view class="points-pop">
        <view class="popup-close" @click="closePoints">
          <image
            src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/popup-close.png"
          ></image>
        </view>
        <!-- //标题 -->
        <view class="logs-title">
          <text>积分</text>
        </view>
        <view class="points-top">
          <view class="my-points">
            <view class="points-img">
              <image
                src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/card/my-points.png"
              ></image>
            </view>
            <view class="points-num">
              <text>999 </text>
            </view>
          </view>
          <view class="points-logs">
            <text>综合</text>
            <text style="color: #7948ea">使用记录</text>
          </view>
        </view>
        <view class="points-list">
          <view class="list-contant">
            <view class="list-num">
              <view class="goods-title">
                <text>Pokemon精灵宝可梦卡牌</text>
              </view>
              <view class="use-num">
                <text>-500</text>
              </view>
            </view>
            <view class="list-time">
              <view class="order-num">
                <text>订单号:12345678910</text>
              </view>
              <view class="num-time">
                <text> 2024/05/10 09:59</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </uni-popup>

    <!-- //单抽 -->
    <uni-popup ref="drawOne" type="center">
      <view class="draw">
        <view class="draw-title">
          <image
            src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/lucky-box/reward.png"
          ></image>
        </view>
        <template v-for="(item, index) in haveDraw" :key="index">
          <view class="goods-img">
            <image :src="item.img"></image>
            <view class="goods-leavel">
              <image :src="item.rule_img"></image>
            </view>
          </view>
        </template>
        <!-- //按钮 -->
        <view class="get-btn" @click="closeOneDraw">
          <image
            src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/lucky-box/get-goods.png"
          ></image>
        </view>
      </view>
    </uni-popup>

    <!-- //三抽 -->
    <uni-popup ref="drawThree" type="center">
      <view class="draw">
        <view class="draw-title">
          <image
            src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/lucky-box/reward.png"
          ></image>
        </view>
        <template v-for="(item, index) in haveDraw" :key="index">
          <view
            :class="[
              'three-top',
              haveDraw.length >= 3 ? drawThreeClassMap[index] : '',
            ]"
          >
            <image :src="item.img"></image>
            <view class="goods-leavel">
              <image :src="item.rule_img"></image>
            </view>
          </view>
        </template>
        <!-- //按钮 -->
        <view class="get-btn three-btn" @click="closeThreeDraw">
          <image
            src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/lucky-box/get-goods.png"
          ></image>
        </view>
      </view>
    </uni-popup>

    <!-- //10抽 -->
    <uni-popup ref="drawFive" type="center">
      <view class="draw">
        <view class="draw-title">
          <image
            src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/lucky-box/reward.png"
          ></image>
        </view>
        <template v-for="(item, index) in haveDraw" :key="index">
          <view
            :class="[
              'ten-top',
              haveDraw.length >= 10 ? drawTenClassMap[index] : '',
            ]"
          >
            <image :src="item.img"></image>
            <view class="goods-leavel">
              <image :src="item.rule_img"></image>
            </view>
          </view>
        </template>
        <!-- //按钮 -->
        <view class="get-btn ten-btn" @click="closeFiveDraw">
          <image
            src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/lucky-box/get-goods.png"
          ></image>
        </view>
      </view>
    </uni-popup>

    <!-- //概率详情 -->
    <uni-popup ref="drawFive2" type="center">
      <view class="goods-pop">
        <view class="popup-star">
          <image
            src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/popup-star.png"
          ></image>
        </view>
        <view class="popup-close" @click="closePopGoods">
          <image
            src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/popup-close.png"
          ></image>
        </view>
        <view class="popup-title">
          <text>详情</text>
        </view>
        <view class="popup-img">
          <image :src="popGoods.img != undefined ? popGoods.img : ''"></image>
        </view>
        <view class="goods-detail">
          <view class="goods-name">
            <text>{{
              popGoods.goods_name != undefined ? popGoods.goods_name : ''
            }}</text>
          </view>
          <view class="goods-specs">
            <view class="goods-odds">
              <text class="">概率:</text>
              <text class="">{{
                popGoods.probability
                  ? Number(popGoods.probability).toFixed(3) + '%'
                  : ''
              }}</text>
            </view>
            <view class="specs">
              <text class="">参考价:</text>
              <text class="">{{
                popGoods && blindboxDetail.box
                  ? Math.max(popGoods.price, blindboxDetail.box.price)
                  : ''
              }}</text>
            </view>
            <view class="state">
              <text class="">状态:</text>
              <text class="">{{
                popGoods ? (popGoods.goods_type == 1 ? '预售' : '现货') : ''
              }}</text>
            </view>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
  import { onMounted, ref } from 'vue'
  import { onLoad, onShow, onShareAppMessage } from '@dcloudio/uni-app'
  import { http } from '@/utils/http.js'
  import { parseTime } from '@/utils/index.js'
  import { useUsercodeStore } from '@/store/usercode.js'
  import ProgressBar from '@/components/ProgressBar.vue'

  const classMap = ref({
    1: 'first',
    2: 'second',
    3: 'third',
    4: 'fourth',
    5: 'fifth',
  })

  const drawThreeClassMap = ref({
    0: 'first',
    1: 'three-left',
    2: 'three-right',
  })

  const drawTenClassMap = ref({
    0: '',
    1: 'left2',
    2: 'right3',
    3: 'left4',
    4: 'mid5',
    5: 'right6',
    6: 'left7',
    7: 'mid8',
    8: 'right9',
    9: 'mid10',
  })

  const userCodeStore = useUsercodeStore()

  const blindboxId = ref()
  const blindboxDetail = ref()
  const boxInfo = ref({})
  const caseId = ref(0)
  // 优惠券id
  const couponId = ref(0)
  const couponname = ref('')
  const couponType = ref(-1)

  const probality = ref('')
  //tab数据
  const current = ref(0)
  const showcc = ref(false)
  const mustRuleNames = ref('')
  const ruleInfos = ref([])
  const power_progress = ref(0)
  // 盲盒详情
  async function getblindboxDetail() {
    const res = await http.request({
      url: '/api/box/boxDetails',
      method: 'POST',
      data: {
        id: blindboxId.value,
      },
    })
    blindboxDetail.value = res.data
    boxInfo.value = res.data.box
    // const keys = ref([])
    // blindboxDetail.value.box.probability_show.forEach((item) => {
    // 	keys.value.push(`${Object.keys(item)}:${item[Object.keys(item)]}%`)
    // })

    let mustNamse = []
    blindboxDetail.value.box.must_rule_name.forEach((item) => {
      mustNamse.push(item.name)
    })
    console.log(mustNamse)
    mustRuleNames.value = mustNamse.join('/')

    ruleInfos.value = blindboxDetail.value.box.rule_info

    power_progress.value =
      (blindboxDetail.value.box.user_power /
        blindboxDetail.value.box.must_leave) *
      100
    console.log('进度', power_progress.value)

    await Promise.all(
      ruleInfos.value.map((item) => getGoodsInfos(item.rule_id))
    )

    // 商品排序
    goodsInfos.value.sort((a, b) => b.price - a.price)
    if (goodsInfos.value.length >= 5) {
      const sortedGoods = [
        goodsInfos.value[1],
        goodsInfos.value[2],
        goodsInfos.value[0],
        goodsInfos.value[3],
        goodsInfos.value[4],
        ...goodsInfos.value.slice(5),
      ]
      goodsInfos.value = sortedGoods
      currentGoods.value = goodsInfos.value[2]
    } else {
      currentGoods.value = goodsInfos.value[0]
    }

    console.log('当前拆卡商品：', currentGoods.value)
    chooseRule(ruleInfos.value[0])
    currentRewardRuleId.value = ruleInfos.value[0].rule_id
  }

  const goodsInfos = ref([])
  const goodsMap = ref({})

  // 获取奖品信息
  async function getGoodsInfos(ruleId) {
    const res = await http.request({
      url: '/api/box/getBoxGoods',
      method: 'POST',
      data: {
        id: blindboxId.value,
        rule_id: ruleId,
      },
    })
    if (res.st == 1) {
      // goodsInfos.value = res.data
      if (!goodsMap.value[ruleId]) {
        goodsMap.value[ruleId] = res.data
        goodsInfos.value = [...goodsInfos.value, ...res.data]
      }
    }
  }

  const currentGoodsInfos = ref([])
  const currentRuleId = ref()
  function chooseRule(item) {
    currentRuleId.value = item.rule_id
    currentGoodsInfos.value = goodsMap.value[item.rule_id]
  }

  const currentGoods = ref({})
  function clickGoods(item) {
    currentGoods.value = item
  }

  //去我的奖品
  function toMyReward() {
    uni.switchTab({
      url: '/pages/bag/index',
    })
  }
  // 开赏记录
  const prizePage = ref(1)
  const openRewardList = ref([])
  const prizeFlag = ref(true)
  const currentRewardRuleId = ref()
  async function openReward() {
    console.log(prizeFlag.value)
    if (prizeFlag.value) {
      const res = await http.request({
        url: '/api/box/winLog',
        method: 'POST',
        data: {
          page: prizePage.value,
          limit: 10,
          id: blindboxId.value,
          rule_id: currentRewardRuleId.value,
        },
      })
      if (res.data.length == 0) {
        uni.utils.toast('已经没有记录了~')
        prizeFlag.value = false
        --prizePage.value
        return
      }
      console.log(res.data)
      openRewardList.value = [...openRewardList.value, ...res.data]
    } else {
      // uni.utils.toast('已经没有记录了~')
      return
    }
  }

  function chooseRewardRule(item) {
    console.log(item)
    prizeFlag.value = true
    currentRewardRuleId.value = item.rule_id
    openRewardList.value = []
    prizePage.value = 1
    openReward()
  }

  function prizeLower() {
    ++prizePage.value
    openReward()
  }

  // 查看奖品详情
  const showmask = ref(false)
  const maskindex = ref(0)
  function goodsinfo(index) {
    showmask.value = true
    maskindex.value = index
  }
  // 关闭mask
  function closeMask() {
    showmask.value = false
  }

  // 规则
  const ruleStrings = ref('')
  async function getRules(id) {
    const res = await http.request({
      url: '/api/index/getDetails',
      method: 'POST',
      data: {
        id: id,
      },
    })
    console.log(res)
    ruleStrings.value = res.data.details
  }

  // 规则
  const rulepopup = ref()
  async function rulePOP() {
    await getRules(7)
    rulepopup.value.open('bottom')
  }

  // 支付
  const paypopup = ref()
  // 没有优惠券的价格
  const paymoney = ref()
  const buyCount = ref(0)
  //有优惠券的jiage
  const realmoney = ref()
  // const agree = ref(true)
  async function payPOP(count) {
    if (
      userCodeStore.usercode.token == '' ||
      userCodeStore.usercode.userId == ''
    ) {
      uni.utils.toast('为了让您有更好的体验，请先登录')
      setTimeout(() => {
        uni.navigateTo({
          url: `/pages/login/login`,
        })
      }, 2000)
      return
    }
    // if (
    // 	userCodeStore.usercode.isAddress == 0 &&
    // 	userCodeStore.usercode.token != ''
    // ) {
    // 	uni.utils.toast('为了让您有更好的体验，请先完善物流信息')
    // 	setTimeout(() => {
    // 		uni.navigateTo({
    // 			url: `/minePage/editaddress/index`,
    // 		})
    // 	}, 2000)
    // 	return
    // }
    await getUserMoney()
    paypopup.value.open('bottom')
    paymoney.value = (blindboxDetail.value.box.price * count).toFixed(2)
    // 每次点击重新选择优惠券
    realmoney.value = paymoney.value
    couponId.value = 0
    couponname.value = ''
    buyCount.value = count
  }
  function changeAgree() {
    agree.value = !agree.value
  }
  //支付radio
  const currentradio = ref(3)
  function radioChange(evt) {
    currentradio.value = evt.detail.value
  }
  // 天选抽卡
  // 卡尘支付
  const haveDraw = ref([])
  async function paytxDrawMoney() {
    const res = await http.request({
      url: 'api/boxorder/createBoxOrder',
      method: 'POST',
      data: {
        id: blindboxId.value,
        sorce: 1,
        num: Number(buyCount.value),
        pay_type: currentradio.value,
        coupon_id: couponId.value,
        money: paymoney.value,
      },
    })
    console.log(res)
    if (res.st == 1) {
      paypopup.value.close()
      haveDraw.value = res.data.box_goods
      openGetGoods()
      // uni.navigateTo({
      // 	url: `/drawPage/txDrawCards/index?thecard=${encodeURIComponent(
      // 		JSON.stringify(haveDraw.value)
      // 	)}&num=${buyCount.value}&id=${blindboxId.value}&pay_type=${
      // 		currentradio.value
      // 	}&case_id=${caseId.value}&money=${paymoney.value}&img=${
      // 		blindboxDetail.value.box.img
      // 	}&name=${blindboxDetail.value.box.name}&couponid=${
      // 		couponId.value
      // 	}`,
      // })
    } else if (res.st == -2) {
      namepopup.value.open('center')
    } else {
      couponId.value = 0
      couponname.value = ''
      uni.utils.toast(res.msg)
    }
  }

  // 微信支付
  //轮询微信支付订单状态
  const timeStatu = ref(true)
  async function askWxOrder() {
    setTimeout(() => {
      timeStatu.value = false
    }, 5000)
    const res = await http.request({
      url: '/api/boxorder/getPayInfo',
      method: 'POST',
      data: {
        id: orderId.value,
        type: 1,
      },
    })
    console.log(res)
    if (res.st == 1) {
      if (res.data.status == 1) {
        haveDraw.value = res.data.box_goods
        uni.navigateTo({
          url: `/drawPage/txDrawCards/index?thecard=${encodeURIComponent(
            JSON.stringify(haveDraw.value)
          )}&num=${buyCount.value}&id=${blindboxId.value}&pay_type=${
            currentradio.value
          }&case_id=${caseId.value}&money=${paymoney.value}&img=${
            blindboxDetail.value.box.img
          }&name=${blindboxDetail.value.box.name}&couponid=${couponId.value}`,
        })
        userCodeStore.setIsTrans(1)
        paypopup.value.close()
      } else {
        uni.utils.toast(res.data.msg)
      }
    } else {
      if (timeStatu.value) {
        askWxOrder()
      } else {
        uni.utils.toast(res.msg)
      }
    }
    paying.value = 1
  }

  const paying = ref(1)
  async function payWXDraw() {
    timeStatu.value = true
    await getId()
    if (!orderId.value) {
      return
    }
    const res = await http.request({
      url: '/api/adapay/adapay/adaPayOrder',
      method: 'POST',
      data: {
        id: orderId.value,
        type: 2,
        preferential: preferential.value,
      },
    })
    console.log(res)
    if (res.st == 1) {
      uni.navigateToMiniProgram({
        appId: res.data.expend.wx_app_id,
        path: res.data.expend.path,
        extraData: {},
        success(res) {
          // 打开成功
          paying.value = 2
        },
      })
    } else {
      uni.utils.toast('拉起支付失败，请联系客服~')
    }
  }

  //跳转天选抽卡
  async function goDrawCards() {
    if (!agree.value) {
      uni.utils.toast('请先同意用户协议')
      return
    }
    //卡尘支付
    if (currentradio.value == 3) {
      if (Number(balance.value) < Number(realmoney.value)) {
        uni.utils.toast('卡尘不足')
        return
      }
      paytxDrawMoney()
      paypopup.value.close()
      // 微信支付
    } else if (currentradio.value == 1) {
      payWXDraw()
    }
  }

  // 用户信息卡尘(暂时)
  const preferential = ref()
  const balance = ref(0)
  async function getUserMoney() {
    const res = await http.request({
      url: '/api/user/userMsg',
      method: 'POST',
      data: {},
    })
    console.log('user')
    console.log(res)
    balance.value = res.data.data.balance
    preferential.value = res.data.preferential
  }

  // 选择优惠券
  function chooseCoupon() {
    uni.navigateTo({
      url: `/drawPage/choosecoupon/index?money=${paymoney.value}&id=${blindboxId.value}&couponid=${couponId.value}`,
    })
  }

  const x = ref(10000)
  const y = ref(300)
  const refreshFlag = ref(true)

  function refresh() {
    console.log('zou')
    if (refreshFlag.value) {
      refreshFlag.value = false
      setTimeout(() => {
        refreshFlag.value = true
      }, 10000)
      if (current.value == 1) {
        prizePage.value = 1
        prizeFlag.value = true
        openRewardList.value = []
        openReward()
      } else if (current.value == 2) {
        ccPage.value = 1
        ccFlag.value = true
        ccRewardList.value = []
        ccReward()
      } else {
        openRewardList.value = []
        ccRewardList.value = []
        getblindboxDetail()
      }
    } else {
      uni.utils.toast('10秒内不可重复点击')
    }
  }

  function goRule(id) {
    uni.navigateTo({
      url: `/homePage/agreement/index?id=${id}`,
    })
  }

  onShareAppMessage(() => {
    return {
      title: `${blindboxDetail.value.box.name} | ${blindboxDetail.value.box.price}一抽 | 第${blindboxDetail.value.case_info.name}箱 | 奖池剩余${blindboxDetail.value.case_info.leftover}/${blindboxDetail.value.case_info.sum}`,
      path: `drawPage/txDraw/index?id=${blindboxId.value}`,
    }
  })

  onLoad((option) => {
    blindboxId.value = option.id
    current.value = 0
    getGoodsInfos()
    getblindboxDetail()
    getUserMoney()
  })
  onShow(() => {
    if (paying.value == 2) {
      askWxOrder()
    }
    uni.$once('thecoupon', (data) => {
      console.log(data)
      realmoney.value = paymoney.value
      if (data.coupon) {
        couponId.value = data.coupon.id
        couponname.value = data.coupon.title
        // 满减
        if (data.coupon.type == 1) {
          realmoney.value = (paymoney.value - data.coupon.money).toFixed(2)
        } else if (data.coupon.type == 2) {
          realmoney.value = (paymoney.value - data.coupon.money).toFixed(2)
        } else if (data.coupon.type == 3) {
          realmoney.value = (paymoney.value * data.coupon.discount).toFixed(2)
        }
      }
    })
  })

  const detailpopup = ref()
  const goodsDetail = ref()
  const drawOne = ref()
  const drawThree = ref()
  const drawFive = ref()
  const drawFive2 = ref()

  const popGoods = ref({})

  function gotodrive2(item) {
    console.log(item)
    // console.log(Number(item.probability)*100+"%")
    popGoods.value = item
    drawFive2.value.open('center')
  }

  function closePopGoods() {
    drawFive2.value.close('center')
  }

  // const closeOneDraw = ref()
  // const openDrawOne = ref()
  function openDetail(item) {
    goodsDetail.value = item
    console.log('选商品', item)
    detailpopup.value.open('center')
  }
  function closePopup() {
    detailpopup.value.close()
  }

  // 打开奖品
  function openGetGoods() {
    if (buyCount.value == 1) {
      openDrawOne()
    }
    if (buyCount.value == 3) {
      openDrawThree()
    }
    if (buyCount.value == 10) {
      openDrawFive()
    }
  }

  // 抽
  function openDrawOne() {
    drawOne.value.open('top')
  }
  function closeOneDraw() {
    drawOne.value.close('top')
    getblindboxDetail()
  }
  //3抽
  function openDrawThree() {
    drawThree.value.open('top')
  }
  function closeThreeDraw() {
    drawThree.value.close('top')
    getblindboxDetail()
  }
  //5抽
  function openDrawFive() {
    drawFive.value.open('top')
  }
  function closeFiveDraw() {
    drawFive.value.close('top')
    getblindboxDetail()
  }

  const odds = ref()
  //概率弹窗
  function openOdds() {
    odds.value.open('center')
  }
  function closeOdds() {
    odds.value.close('center')
  }

  //记录弹窗
  const logs = ref()
  function openLogs() {
    logs.value.open('center')
    openReward()
  }
  function closeLogs() {
    logs.value.close()
  }

  const rule = ref()
  function openRule() {
    rule.value.open('bottom')
  }
  function closeRule() {
    rule.value.close()
  }

  const points = ref()
  //积分弹窗
  function openPoints() {
    points.value.open('bottom')
  }
  function closePoints() {
    points.value.close('bottom')
  }
</script>

<style lang="scss" scoped>
  page {
    background-color: #e9eaf2;
  }
  .top-goods {
    width: 96%;
    height: 285rpx;
    // background-color: #fff;
    margin: 10rpx auto;
    border-radius: 10rpx;
    position: relative;
    .first {
      position: absolute;
      top: 60rpx;
      left: 30rpx;
      box-shadow: 0upx 10upx 30upx 0upx rgba(0, 0, 0, 0.16);
      width: 144rpx;
      height: 200rpx;
      image {
        width: 144rpx;
        height: 200rpx;
      }
      .UR {
        position: absolute;
        top: -2rpx;
        left: 0rpx;
        image {
          width: 70rpx;
          height: 40rpx;
        }
      }
    }
    .second {
      position: absolute;
      top: 42rpx;
      left: 144rpx;
      box-shadow: 0upx 10upx 30upx 0upx rgba(0, 0, 0, 0.16);
      width: 144rpx;
      height: 200rpx;
      image {
        width: 144rpx;
        height: 200rpx;
      }
      .UR {
        position: absolute;
        top: -2rpx;
        left: 0rpx;
        image {
          width: 70rpx;
          height: 40rpx;
        }
      }
    }
    .third {
      position: absolute;
      top: 13rpx;
      left: 270rpx;
      z-index: 2;
      box-shadow: 0upx 10upx 30upx 0upx rgba(0, 0, 0, 0.16);
      width: 144rpx;
      height: 200rpx;
      image {
        width: 190rpx;
        height: 258rpx;
      }
      .UR {
        position: absolute;
        top: -2rpx;
        left: 0rpx;
        image {
          width: 70rpx;
          height: 40rpx;
        }
      }
    }
    .fourth {
      position: absolute;
      top: 42rpx;
      right: 144rpx;
      z-index: 1;
      box-shadow: 0upx 10upx 30upx 0upx rgba(0, 0, 0, 0.16);
      width: 144rpx;
      height: 200rpx;
      image {
        width: 144rpx;
        height: 200rpx;
      }
      .UR {
        position: absolute;
        top: -2rpx;
        right: 0rpx;
        image {
          width: 70rpx;
          height: 40rpx;
        }
      }
    }
    .fifth {
      position: absolute;
      top: 60rpx;
      right: 30rpx;
      box-shadow: 0upx 10upx 30upx 0upx rgba(0, 0, 0, 0.16);
      width: 144rpx;
      height: 200rpx;
      image {
        width: 144rpx;
        height: 200rpx;
      }
      .UR {
        position: absolute;
        top: -2rpx;
        right: 0rpx;
        image {
          width: 70rpx;
          height: 40rpx;
        }
      }
    }
  }
  .goods-mid {
    // height:border-box;
    width: 96%;
    background-color: #fff;
    border-radius: 10rpx;
    margin: 10rpx auto;
    padding-bottom: 10rpx;
    .mid-img {
      display: flex;
      position: relative;
      padding-top: 7rpx;

      image {
        width: 648rpx;
        height: 872rpx;
      }
      .right-rule {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 9rpx;
        right: 8rpx;

        image {
          width: 90rpx;
          height: 54rpx;
          margin-bottom: 15rpx;
        }
        .points {
          image {
            width: 77rpx;
            height: 32rpx;
          }
        }
        .comeout {
          image {
            width: 77rpx;
            height: 32rpx;
          }
        }
      }
    }
    .mid-goods {
      position: absolute;
      top: 250rpx;
      left: 193rpx;
      box-shadow: 0px 0px 8px rgba(255, 141, 26, 0.25);
      .goods-img {
        width: 340rpx;
        height: 450rpx;
        image {
          width: 340rpx;
          height: 450rpx;
          border-radius: 22rpx;
        }
      }
      .img-leavel {
        position: absolute;
        top: -12rpx;
        left: 6rpx;
        image {
          width: 92rpx;
          height: 96rpx;
        }
      }
    }
    .progress-bar {
      width: 696rpx;
      height: 103rpx;
      margin: 10rpx auto;
      background-color: #f5f0ff;
      border-radius: 14rpx;
      border: 5rpx solid #bca2f5;
      display: flex;
      flex-direction: column;
      .top-tit {
        display: flex;
        justify-content: space-between;
        margin: 0rpx 15rpx 0rpx 15rpx;
        .comeout-left {
          image {
            width: 114rpx;
            height: 38rpx;
          }
        }
        .comeout-right {
          font-size: 20rpx;
          display: flex;
          align-items: center;
        }
      }
      .bottom-num {
        display: flex;
        justify-content: space-between;
        margin: 10rpx;
        .left-gif {
          width: 560rpx;
          height: 40rpx;
        }
        .all-num {
          font-weight: 600;
          color: 28rpx;
          color: #000;
        }
      }
    }
  }
  .select-num-btn {
    width: 100%;
    height: 142rpx;
    background-color: #fff;
    display: flex;
    position: fixed;
    bottom: 0rpx;
    justify-content: space-between;
    box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.09);
    .select-one {
      margin: 20rpx auto;
      image {
        width: 172rpx;
        height: 92rpx;
      }
    }
  }
  //支付弹窗
  .order-pop {
    width: 730rpx;
    height: 900rpx;
    background-color: #fff;
    border-radius: 26rpx 26rpx 0rpx 0rpx;
    box-shadow: 0px 4rpx 8rpx rgba(115, 53, 53, 0.25);
    position: relative;
    border: 6rpx solid #740b00;
    margin: auto;
    .popup-close {
      position: absolute;
      top: 16rpx;
      right: 16rpx;
      width: 46rpx;
      height: 46rpx;
      image {
        width: 46rpx;
        height: 46rpx;
      }
    }
    .popup-title {
      font-size: 36rpx;
      color: #000;
      margin-top: 15rpx;
      text-align: center;
    }
    .order-top {
      display: flex;
      justify-content: space-around;
      margin: 30rpx auto;
      .left-img {
        width: 326rpx;
        height: 142rpx;
        image {
          width: 326rpx;
          height: 142rpx;
          border-radius: 10rpx;
        }
      }
      .right-tit {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: start;

        .title {
          font-size: 28rpx;
          color: #000;
          font-weight: 600;
        }
        .tit-mid {
          font-size: 20rpx;
          color: #808080;
        }
        .tit-num {
          font-size: 24rpx;
          font-weight: 600;
          display: flex;
          // justify-content: space-evenly;
        }
      }
    }
    .select-coupon {
      display: flex;
      justify-content: space-between;
      margin: 20rpx auto;
      width: 91%;
      font-weight: 600;
      .coupon-left {
        font-size: 24rpx;
        color: #000;
      }
      .coupon-right {
        font-size: 20rpx;
        color: #956fed;
        display: flex;
      }
    }
    .popup-line {
      width: 91%;
      margin: 30rpx auto;
      opacity: 0.5;
      border: 2rpx dashed #a6a6a6;
    }
    .payment-tit {
      font-size: 24rpx;
      color: #000;
      margin: 32rpx;
      font-weight: 600;
    }
    .payment-list {
      display: flex;
      flex-direction: column;
      .wechat {
        display: flex;
        justify-content: space-between;
        // margin-bottom: 35rpx;
        .wechat-left {
          display: flex;
          margin-left: 27rpx;
          .wechat-img {
            width: 64rpx;
            height: 52rpx;
            // margin-left: 30rpx;
            image {
              width: 64rpx;
              height: 52rpx;
            }
          }
          .wechat-tit {
            font-size: 26rpx;
            color: #383838;
            margin: auto;
            margin-left: 30rpx;
          }
        }
        .wechat-right {
          display: flex;
          .wechat-money {
            font-size: 24rpx;
            color: #916ae6;
            margin: auto;
            margin-right: 20rpx;
          }
          .select-icon {
            margin-right: 30rpx;
            width: 50rpx;
            height: 50rpx;
            image {
              width: 50rpx;
              height: 50rpx;
            }
          }
        }
      }
      .underage {
        font-size: 18rpx;
        color: #916ae6;
        margin: 10rpx auto;
      }
      .pay-button {
        width: 530rpx;
        height: 94rpx;
        margin: 10rpx auto;
        image {
          width: 530rpx;
          height: 94rpx;
        }
      }
      .pay-agree {
        width: 100%;
        // margin-top: 29rpx;
        font-size: 20rpx;
        color: #3d3d3d;
        text-align: center;
      }
    }
  }
  .logs {
    width: 710rpx;
    height: 978rpx;
    background-color: #fff;
    border-radius: 26rpx;
    box-shadow: 0px 4rpx 8rpx rgba(115, 53, 53, 0.25);
    position: relative;
    border: 6rpx solid #740b00;
    font-size: 26rpx;
    color: #808080;
    margin: auto;
    .popup-close {
      position: absolute;
      top: 16rpx;
      right: 16rpx;
      width: 46rpx;
      height: 46rpx;
      image {
        width: 46rpx;
        height: 46rpx;
      }
    }
    .logs-title {
      margin: 30rpx auto;
      text-align: center;
      color: #383838;
      font-size: 32rpx;
      font-weight: 600;
    }
    .card-leavel {
      width: 90%;
      margin: auto;
      display: flex;
      overflow: scroll;
      white-space: nowrap;

      .leavel-all {
        width: 126rpx;
        height: 60rpx;
        line-height: 60rpx;
        background-color: #f5f5f5;
        border-radius: 14rpx;
        text-align: center;
        font-weight: 600;
        font-size: 28rpx;
        color: #808080;
        margin-right: 30rpx;
      }
    }
    .logs-list {
      margin: 20rpx auto;
      height: 780rpx;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      background-color: #eae2fa;
      .all-logs {
        background-color: #fff;
        width: 95%;
        height: 152rpx;
        border-radius: 14rpx;
        margin: 10rpx auto;
        display: flex;
        justify-content: space-between;
        .logs-left {
          display: flex;
          text-align: center;
          font-size: 30rpx;
          color: #740b00;
          margin: 15rpx;
          .logs-img {
            image {
              width: 88rpx;
              height: 124rpx;
            }
          }
          .name {
            margin: auto;
            margin-left: 30rpx;
            white-space: nowrap;
            width: 266rpx;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
        .logs-right {
          display: flex;
          color: #8f66ed;
          font-size: 32rpx;
          font-weight: 600;
          margin-right: 30rpx;
          .logs-num {
            margin: auto;
            margin-right: 30rpx;
          }
          .user-img {
            display: flex;
            flex-direction: column;
            color: #000;
            text-align: center;
            font-size: 20rpx;

            margin: auto;

            .user-imgs {
            }
            image {
              width: 90rpx;
              height: 90rpx;
              border-radius: 60rpx;
            }
          }
        }
      }
    }
  }

  //概率
  .odds {
    width: 710rpx;
    height: 978rpx;
    background-color: #fff;
    border-radius: 26rpx;
    box-shadow: 0px 4rpx 8rpx rgba(115, 53, 53, 0.25);
    position: relative;
    border: 6rpx solid #740b00;
    font-size: 26rpx;
    color: #808080;
    margin: auto;
    .popup-close {
      position: absolute;
      top: 16rpx;
      right: 16rpx;
      width: 46rpx;
      height: 46rpx;
      image {
        width: 46rpx;
        height: 46rpx;
      }
    }
    .logs-title {
      margin: 30rpx auto;
      text-align: center;
      color: #383838;
      font-size: 32rpx;
      font-weight: 600;
    }
    .odds-list {
      width: 95%;
      margin: 20rpx auto;
      display: flex;
      .odds-name {
        background-color: #f5f5f5;
        color: #808080;
        width: 120rpx;
        margin-right: 30rpx;
        height: 66rpx;
        border-radius: 10rpx;
        font-size: 26rpx;
        text-align: center;
        font-weight: 600;
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
      }
    }
    .odds-line {
      border: 1px dashed #f5f5f5;
      width: 660rpx;
      margin: 30rpx auto;
    }
    .odds-goods-list {
      margin: auto;
      width: 98%;
      display: flex;
      overflow: scroll;
      flex-wrap: wrap;
      height: 710rpx;
      justify-content: center;
      .odds-goods {
        width: 164rpx;
        height: 260rpx;
        background-color: #eee8fa;
        border-radius: 10rpx;
        margin: 5rpx;
        image {
          width: 140rpx;
          height: 190rpx;
          margin: 14rpx;
        }
        .goods-name {
          font-size: 18rpx;
          color: #000;
          text-align: center;
          display: inline-block;
          white-space: nowrap;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
  .rule {
    width: 710rpx;
    height: 978rpx;
    background-color: #fff;
    border-radius: 26rpx;
    box-shadow: 0px 4rpx 8rpx rgba(115, 53, 53, 0.25);
    position: relative;
    border: 6rpx solid #740b00;
    font-size: 26rpx;
    color: #808080;
    margin: auto;
    .popup-close {
      position: absolute;
      top: 16rpx;
      right: 16rpx;
      width: 46rpx;
      height: 46rpx;
      image {
        width: 46rpx;
        height: 46rpx;
      }
    }
    .logs-title {
      margin: 30rpx auto;
      text-align: center;
      color: #383838;
      font-size: 32rpx;
      font-weight: 600;
    }
    .rule-text {
      width: 98%;
      margin: 30rpx auto;
      height: 710rpx;
      overflow: scroll;
      flex-wrap: wrap;
      font-size: 28rpx;
      color: #7d7d7d;
    }
  }
  .points-pop {
    width: 710rpx;
    height: 978rpx;
    background-color: #e9e1fa;
    border-radius: 26rpx;
    box-shadow: 0px 4rpx 8rpx rgba(115, 53, 53, 0.25);
    position: relative;
    border: 6rpx solid #740b00;
    font-size: 26rpx;
    color: #808080;
    margin: auto;
    .popup-close {
      position: absolute;
      top: 16rpx;
      right: 16rpx;
      width: 46rpx;
      height: 46rpx;
      image {
        width: 46rpx;
        height: 46rpx;
      }
    }
    .logs-title {
      margin: 30rpx auto;
      text-align: center;
      color: #383838;
      font-size: 32rpx;
      font-weight: 600;
    }
    .points-top {
      width: 688rpx;
      height: 208rpx;
      background-color: #fff;
      border-radius: 10rpx;
      margin: 10rpx auto;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      .my-points {
        background: linear-gradient(
          90deg,
          rgba(219, 205, 250, 1) 0%,
          rgba(217, 220, 255, 1) 100%
        );
        width: 620rpx;
        height: 90rpx;
        border-radius: 14rpx;
        display: flex;
        margin: 10rpx auto;
        justify-content: space-evenly;
        .points-img {
          width: 208rpx;
          height: 66rpx;
          margin: 10rpx;
          image {
            width: 208rpx;
            height: 66rpx;
          }
        }
        .points-num {
          font-size: 44rpx;
          font-weight: 600;
          color: #fff;
          text-shadow: 3rpx 4rpx 7rpx #7948ea;
          // border: 3rpx solid #7948EA;
          line-height: 90rpx;
          text-align: center;
        }
      }
      .points-logs {
        display: flex;
        justify-content: space-evenly;
        font-size: 34rpx;
        color: #a6a6a6;
      }
    }
    .points-list {
      height: 600rpx;
      margin: 10rpx auto;
      overflow: scroll;
      flex-wrap: wrap;
      .list-contant {
        background-color: #fff;
        width: 688rpx;
        height: 166rpx;
        border-radius: 10rpx;
        margin: 20rpx auto;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        .list-num {
          display: flex;
          justify-content: space-between;
          width: 85%;
          font-size: 36rpx;
          margin-left: 7%;
          .goods-title {
            color: #000;
          }
          .use-num {
            color: #7948ea;
          }
        }
        .list-time {
          font-size: 28rpx;
          color: #a6a6a6;
          display: flex;
          justify-content: space-between;
          width: 88%;
          margin-left: 7%;
        }
      }
    }
  }
  .draw {
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.48);
    display: flex;
    flex-direction: column;
    .draw-title {
      width: 100%;
      height: 160rpx;
      display: flex;
      justify-content: center;
      position: relative;
      margin: 5% auto;
      image {
        width: 592rpx;
        height: 160rpx;
      }
    }

    .three-top {
      position: absolute;
      top: 230rpx;
      left: 30%;
      width: 304rpx;
      height: 412rpx;
      image {
        width: 304rpx;
        height: 412rpx;
        border-radius: 10rpx;
      }
      .goods-leavel {
        position: absolute;
        top: 0rpx;
        left: 0rpx;
        z-index: 99;
        image {
          width: 122rpx;
          height: 55rpx;
        }
      }
    }
    .ten-top {
      position: absolute;
      top: 14%;
      left: 39%;
      width: 186rpx;
      height: 250rpx;
      image {
        width: 186rpx;
        height: 250rpx;
        border-radius: 5rpx;
      }
      .goods-leavel {
        position: absolute;
        top: 0rpx;
        left: 0rpx;
        z-index: 99;
        image {
          width: 122rpx;
          height: 55rpx;
        }
      }
    }
    .left2 {
      position: absolute;
      top: 23%;
      left: 7%;
    }
    .right3 {
      position: absolute;
      top: 23%;
      left: 70%;
    }
    .left4 {
      position: absolute;
      top: 42%;
      left: 7%;
    }
    .mid5 {
      position: absolute;
      top: 32%;
      left: 39%;
    }
    .right6 {
      position: absolute;
      left: 70%;
      top: 42%;
    }
    .left7 {
      position: absolute;
      top: 61%;
      left: 7%;
    }
    .mid8 {
      position: absolute;
      top: 50%;
      left: 39%;
    }
    .right9 {
      position: absolute;
      left: 70%;
      top: 61%;
    }
    .mid10 {
      position: absolute;
      top: 68%;
      left: 39%;
    }
    .three-left {
      position: absolute;
      left: 56rpx;
      top: 44%;
      width: 298rpx;
      height: 402rpx;
      image {
        width: 298rpx;
        height: 402rpx;
      }
    }
    .three-right {
      position: absolute;
      left: 52%;
      top: 44%;
      width: 298rpx;
      height: 402rpx;
      image {
        width: 298rpx;
        height: 402rpx;
      }
    }
    .goods-img {
      width: 376rpx;
      height: 526rpx;
      margin: 100rpx auto;
      position: relative;
      image {
        width: 376rpx;
        height: 526rpx;
        border-radius: 10rpx;
      }
      .goods-leavel {
        position: absolute;
        top: 0rpx;
        left: 0rpx;
        z-index: 99;
        image {
          width: 122rpx;
          height: 55rpx;
        }
      }
    }
    .get-btn {
      width: 460rpx;
      height: 88rpx;
      display: flex;
      justify-content: center;
      margin: 60rpx auto;
      image {
        width: 460rpx;
        height: 88rpx;
      }
    }
    .three-btn {
      position: absolute;
      top: 70%;
      left: 19%;
    }
    .ten-btn {
      position: absolute;
      top: 82%;
      left: 19%;
    }
  }
  .goods-pop {
    width: 538rpx;
    height: 770rpx;
    background-color: #fff;
    border-radius: 26rpx;
    box-shadow: 0px 4rpx 8rpx rgba(115, 53, 53, 0.25);
    position: relative;
    border: 6rpx solid #740b00;
  }
  .popup-star {
    position: absolute;
    top: -45rpx;
    left: -4rpx;
    image {
      width: 90rpx;
      height: 88rpx;
    }
  }
  .popup-close {
    position: absolute;
    top: 16rpx;
    right: 16rpx;
    image {
      width: 46rpx;
      height: 46rpx;
    }
  }

  .popup-title {
    font-size: 36rpx;
    color: #000;
    margin-top: 15rpx;
    text-align: center;
  }
  .popup-img {
    width: 368rpx;
    height: 502rpx;
    margin: 42rpx auto;
    image {
      width: 368rpx;
      height: 502rpx;
      border-radius: 14rpx;
    }
  }
  .goods-detail {
    width: 440rpx;
    height: 78rpx;
    border: 4rpx solid #740b00;
    border-radius: 10rpx;
    margin: 40rpx auto;
    .goods-name {
      font-size: 28rpx;
      color: #740b00;
      text-align: center;
    }
    .goods-specs {
      display: flex;
      font-size: 20rpx;
      font-weight: 500;
      color: #fff;
      background-color: #b8a0e8;
      height: 35rpx;
      line-height: 35rpx;
      text-align: center;
      justify-content: space-evenly;
      margin-top: 6rpx;
      border-radius: 0rpx 0rpx 7rpx 7rpx;
    }
  }
</style>
